<template>
    <el-container style="height:100%;">
      <el-header>服务审核</el-header>
        <el-container>
            <el-main style="padding:20px 100px;">
                <el-card class="box-card">
                <div>
                    <el-input placeholder="请输入关键字" v-model="input" suffix-icon="el-icon-search" style="width:200px;float: left;padding-right:0px"></el-input>
                    <el-radio-group v-model="radio">
                        <el-radio-button label="全部"></el-radio-button>
                        <el-radio-button label="未审核"></el-radio-button>
                        <el-radio-button label="审核通过"></el-radio-button>
                        <el-radio-button label="审核不通过"></el-radio-button>
                    </el-radio-group>
                </div>
                <ul style="list-style-type:none;margin-left: -40px;">
                    <li v-for="(item,index) in tableData" :item="item" :key="index">
                        <table class="data-approval">
                            <tr>
                                <td class="column" prop="tbname" label="表名"><el-link :underline="false" type="primary" class="tbname" @click="showApprovalInfo(item.id)">{{item.tbname}}</el-link></td>
                                <td></td>
                                <td class="column" prop="cuibannum" label="催办次数"><el-tag type="warning" class="cuibannum">催办{{item.cuibannum}}次</el-tag></td>
                            </tr>
                            <tr>
                                <td class="th-name">申请字段</td>
                                <td class="column" prop="approvalfield" label="申请字段">{{item.approvalfield}}</td>
                                <td class="th-name" >申请人</td>
                                <td class="column" prop="approval" label="申请人">{{item.approval}}</td>
                                <td class="column status" prop="status" label="审批状态" v-if="item.status==1"><el-link :underline="false" type="success" class="approval">{{approval1}}</el-link></td>
                                <td class="column status" prop="status" label="审批状态" v-else-if="item.status==2"><el-link :underline="false" type="warning" class="approval">{{approval2}}</el-link></td>
                                <td class="column status" prop="status" label="审批状态" v-else><el-link :underline="false" type="primary" class="approval">{{approval3}}</el-link></td>
                            </tr>
                            <tr>
                                <td class="th-name">申请条件</td>
                                <td class="column" prop="approvalcondition" label="申请条件">{{item.approvalcondition}}</td>
                                <td class="th-name" >所属部门</td>
                                <td class="column" prop="dept" label="所属部门">{{item.dept}}</td>
                            </tr>
                        </table>
                        <hr>
                    </li>
                </ul>
                
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data () {
      return {
        approval1:'审核中',
        approval2:'不通过',
        approval3:'已通过',
        input:'',
        radio: '全部',
        tableData:[{
          id: '11',
          tbname: '供应商数据表',
          cuibannum: '5',
          approvalfield: '字段1',
          approval: '张宇民',
          status: '1',
          approvalcondition: '过滤条件1',
          dept: '产品研发部'
        },{
          id: '22',
          tbname: '供应商数据表',
          cuibannum: '5',
          approvalfield: '字段1',
          approval: '张宇民',
          status: '2',
          approvalcondition: '过滤条件1',
          dept: '产品研发部'
        },{
          id: '33',
          tbname: '供应商数据表',
          cuibannum: '5',
          approvalfield: '字段1',
          approval: '张宇民',
          status: '3',
          approvalcondition: '过滤条件1',
          dept: '产品研发部'
        }],
        approvalId: ''
      };
    },
    methods: {
        showApprovalInfo(id){
            this.$router.push({  
            path: '.view/showApprovalInfo',  
            params: {   
                id: id
            }    
        }) 
        }
    }
  }
</script>
<style scoped>
.el-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.box-card {
  height: calc(100% - 2px);
}
.clearfix {
  text-align: start;
}
.el-row {
    margin-bottom: 20px;
    font-family:'Microsoft YaHei';
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.data-approval{
    font-size: small;
    width: 100%;
    text-align: left;
}
.th-name{
    width: 80px;
}
.status{
    text-align: center;
}
.tbname,.approval{
    font-size: 13px;
}
</style>